
<template>
      <div class="info_mian">
        <div class="box">
          <div class="info_box">
            <img :src="memberInfo.avatar" style="width: 60px;height: 60px;border-radius: 50%">
            <div class="info_font">
              <h2>{{memberInfo.nickname}}</h2>
              <t-space size="50px">
                <span class="member_info_font">ID：{{memberInfo.id}}</span>
                <span class="member_info_font">手机号：{{memberInfo.contact_phone}}</span>
                <span class="member_info_font">矩阵数量：{{memberInfo.matrix_count}}</span>
                <span class="member_info_font">用户类型：{{memberInfo.usertype}}</span>
              </t-space>
<!--              <p>ID：{{memberInfo.id}}</p>-->
            </div>
          </div>
          <div>
<!--            <t-button  theme="default" >资料修改</t-button>-->
          </div>
        </div>

        <div class="guarder_box" :style="{
                 backgroundImage: `url(${memberInfo.guarder.bg_img})`,
                 backgroundSize: 'cover, cover',
                 backgroundPosition: 'center, center',
                 backgroundRepeat: 'no-repeat'
               }">
          <div class="guarder_info" >
            <img  :src="memberInfo.guarder.logo" style="width: 60px;height: 60px;border-radius: 50%">
            <div class="guarder_title">
              {{memberInfo.guarder.version_type}}<br>
              <t-space size="20px" align="center">
                <p class="guarder_time">会员到期时间：{{memberInfo.expire_date}}</p>
                <p class="guarder_time">基础设备数量：{{memberInfo.jc_devices}}台</p>
                <p class="guarder_time">加量设备数量：{{memberInfo.jl_devices ??  0}}台  </p>
                <t-button size="small" shape="round" theme="default" @click="isDialogDevice = true">购买设备</t-button>
              </t-space>
            </div>
          </div>
          <div>
            <t-button shape="round" theme="default" @click="isDialogPlans = true" >升级会员</t-button>
          </div>
        </div>


      </div>

  <t-dialog
      v-model:visible="isDialogPlans"
      header="会员升级"
      width="50%"
      :footer="false"
  >
    <!-- 通过 props 传递参数 -->
    <PlansView v-if="isDialogPlans"  />
  </t-dialog>
  <t-dialog
      v-model:visible="isDialogDevice"
      header="设备加量包"
      width="50%"
      :footer="false"
  >
    <!-- 通过 props 传递参数 -->
    <DeviceView v-if="isDialogDevice" :item="deviceInfo" />
  </t-dialog>
</template>
<script setup>
import {ref} from "vue";
import {get} from "@/utils/api";
import config from "@/config";
import PlansView from "./PlansView.vue";
import DeviceView from "./DeviceView.vue";

const deviceInfo = ref({
  type:1,
  orderType:3
})
const isDialogPlans = ref(false)
const isDialogDevice = ref(false)
const memberInfo = ref({
  nickname: '',
  id: '',
  avatar: '',
  username: '',
  contact_phone:"",
  matrix_count:"",
  usertype:"",
  expire_date: '',
  guarder: {
    version_type: '',
    logo: '',
    bg_img:"",

  }
})
const getMemberInfo = () => {
  get(config.getMemberInfo).then(res => {
    memberInfo.value = res.data.data
    console.log("getMemberInfo", res.data.data)
  })
}
getMemberInfo()


</script>
<style scoped>
.info_mian{
  padding: 20px 30px;
}
.box{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.info_box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
.info_font{
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 60px;
}
.info_font h2{
  font-size: 24px;
  font-weight: 600;
}
.info_font p{
  font-size: 12px;
  color: #adacac;
}
.guarder_box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
  background: linear-gradient(122deg, #cad1df 30.56%, #a3a9b5 73.87%);
  padding: 20px;
  border-radius: 10px;
}
.guarder_info{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.guarder_title{
  font-size: 20px;
  font-weight: 600;
  margin-left: 20px;
  line-height: 1.8;
}
.guarder_time{
  font-size: 14px;
  color: #adacac;
}
.member_info_font{
  font-size: 14px;
  color: #adacac;
}
</style>
